import { useState } from "react";
import { Table, Input, Button, Form } from "antd";
export default function AgentRebate() {
  const [form] = Form.useForm();
  const [formValues, setFormValues] = useState({});

  // 数据源
  const agentClientData = [
    { key: "1", stage: "1-5个", field: "incentive_1" },
    { key: "2", stage: "6-50个", field: "incentive_2" },
    { key: "3", stage: "51及以上", field: "incentive_3" },
  ];

  const transactionMarkupData = [
    { key: "4", route: "EUR/USD/CNH->EUR/USD（法币转出）", field: "markup_1" },
    {
      key: "5",
      route: "EUR/USD/CNH->USDT/USDC（法币转U币）",
      field: "markup_2",
    },
    { key: "6", route: "USDT/USDC->EUR/USD（U币转法币）", field: "markup_3" },
    { key: "7", route: "ERU/USD/CNH->CNY（法到CNY）", field: "markup_4" },
    { key: "8", route: "USDT/USDC->CNY（U到CNY）", field: "markup_5" },
  ];

  const agentTradingData = [
    {
      key: "9",
      type: "法币与U币兑换",
      tier: "500万美金以下",
      field: "rate_9",
    },
    {
      key: "10",
      type: "",
      tier: "500-2000万美金",
      field: "rate_10",
    },
    {
      key: "11",
      type: "",
      tier: "2000万-1亿美金",
      field: "rate_11",
    },
    {
      key: "12",
      type: "",
      tier: "1亿-5亿美金",
      field: "rate_12",
    },
    {
      key: "13",
      type: "",
      tier: "5亿美金及以上",
      field: "rate_13",
    },
    {
      key: "14",
      type: "U币与法币兑换",
      tier: "500万美金以下",
      field: "rate_14",
    },
    {
      key: "15",
      type: "",
      tier: "500-2000万美金",
      field: "rate_15",
    },
    {
      key: "16",
      type: "",
      tier: "2000万-1亿美金",
      field: "rate_16",
    },
    {
      key: "17",
      type: "",
      tier: "1亿-5亿美金",
      field: "rate_17",
    },
    {
      key: "18",
      type: "",
      tier: "5亿美金及以上",
      field: "rate_18",
    },
    {
      key: "19",
      type: "结汇",
      tier: "500万美金以下",
      field: "rate_19",
    },
    {
      key: "20",
      type: "",
      tier: "500-2000万美金",
      field: "rate_20",
    },
    {
      key: "21",
      type: "",
      tier: "2000万-1亿美金",
      field: "rate_21",
    },
    {
      key: "22",
      type: "",
      tier: "1亿-5亿美金",
      field: "rate_22",
    },
    {
      key: "23",
      type: "",
      tier: "5亿美金及以上",
      field: "rate_23",
    },
  ];

  // 定义各个表格列
  const columns1 = [
    { title: "阶梯", dataIndex: "stage", key: "stage" },
    {
      title: "激励金额",
      key: "input",
      render: (_, record) => (
        <Form.Item
          name={record.field}
          rules={[{ required: true, message: "请输入金额" }]}
        >
          <Input placeholder="请输入" suffix="USD/个" />
        </Form.Item>
      ),
    },
  ];

  const columns2 = [
    { title: "交易链路", dataIndex: "route", key: "route" },
    {
      title: "加点费率分润比例",
      key: "input",
      render: (_, record) => (
        <Form.Item
          name={record.field}
          rules={[{ required: true, message: "请输入比例" }]}
        >
          <Input placeholder="请输入" suffix="%" />
        </Form.Item>
      ),
    },
  ];

  const columns3 = [
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
      width: "20%",
      render: (value: any, row: any, index: number) => {
        const obj: any = {
          children: value,
          props: {},
        };

        // 合并单元格逻辑
        if (index === 0) obj.props.rowSpan = 5; // 法币与U币兑换
        if (index > 0 && index < 5) obj.props.rowSpan = 0;

        if (index === 5) obj.props.rowSpan = 5; // U币与法币兑换
        if (index > 5 && index < 10) obj.props.rowSpan = 0;

        if (index === 10) obj.props.rowSpan = 5; // 结汇
        if (index > 10 && index < 15) obj.props.rowSpan = 0;

        return obj;
      },
    },
    {
      title: "阶梯",
      dataIndex: "tier",
      key: "tier",
      width: "50%",
    },
    {
      title: "分润比例",
      dataIndex: "rate",
      key: "rate",
      render: (_: any, record: any) => (
        <Form.Item
          name={record.field}
          rules={[{ required: true, message: "请输入比例" }]}
        >
          <Input placeholder="请输入" suffix="%" />
        </Form.Item>
      ),
    },
  ];

  // 提交表单
  const onFinish = (values: any) => {
    console.log("所有表单数据:", values);
    setFormValues(values); // 保存数据到 state
  };

  return (
    <div>
      <Form form={form} onFinish={onFinish}>
        {/* 代理开户激励 */}
        <h3>代理开户激励</h3>
        <Table
          style={{ width: "390px" }}
          columns={columns1}
          size="small" // 使用小号表格
          dataSource={agentClientData}
          pagination={false}
          bordered
        />

        {/* 代理交易加点分润 */}
        <h3>代理交易加点分润</h3>
        <Table
          style={{ width: "500px" }}
          columns={columns2}
          size="small" // 使用小号表格
          dataSource={transactionMarkupData}
          pagination={false}
          bordered
        />

        {/* 代理交易分润 */}
        <h3>代理交易分润</h3>
        <Table
          style={{ width: "580px" }}
          columns={columns3}
          size="small" // 使用小号表格
          dataSource={agentTradingData}
          pagination={false}
          rowClassName={() => "custom-row-height"}
          bordered
        />

        {/* 确定按钮 */}
        <Button type="primary" htmlType="submit" style={{ marginTop: "20px" }}>
          确定
        </Button>
      </Form>

      {/* 显示表单结果 */}
      {formValues && (
        <pre
          style={{ marginTop: "20px", background: "#f5f5f5", padding: "10px" }}
        >
          {JSON.stringify(formValues, null, 2)}
        </pre>
      )}
    </div>
  );
}
